<template>
  <div>
		<n-space>
			<n-select
				v-model:value="params.classId"
				:options="grades"
				label-field="name"
				value-field="id"
				placeholder="请选择班级"
				filterable
				@update:value="getTable"/>
			<n-button type="primary" @click="api.add({ classId: params.classId, showEditProps })">
				<template #icon>
					<n-icon>
						<icon-plus />
					</n-icon>
				</template>
				添加学生
			</n-button>
		</n-space>
		<WyTable :data="{ tableData, params, columns, api, getTable }" />
		<n-modal
			style="width: 800px;"
			v-model:show="showEditProps.show"
			:title="showEditProps.title"
			preset="card"
			draggable>
			<component :is="edit" :classId="params.classId" :editProps="showEditProps" :getTable="getTable" />
		</n-modal>
	</div>
</template>

<script setup lang="jsx">
import { defineAsyncComponent, reactive, ref } from 'vue'
import api from '@/data/student'
import WyTable from '@@/table'
import IconPlus from '@@/icons/plus'
const params = reactive({
	pageNo: 1,
	pageSize: 10,
	classId: null,
	name: ''
})
const showEditProps = reactive({
	id: null,
	title: '',
	show: false
})
const grades = await api.getGrades()
const edit = defineAsyncComponent(() => import('./edit')) 
const tableData = ref([])
const columns = api.createTableColumns({tableData, params, showEditProps})
function getTable () {
	api.upDateTable(params, tableData)
}
</script>

<style scoped lang="scss">

</style>